<template>
  <div class="login">
    <div class="xlogin">
      <h1>登录</h1>
      <h4>输入登录详细信息以获取访问权限</h4>
      <div class="input">
        <h3>用户名</h3>
        <input v-model="uname" type="text" placeholder="请输入用户名" />

        <h3>密码</h3>
        <input v-model="upwd" type="text" placeholder="请输入密码" />

        <div class="status">
          <div class="inph">
            <div class="left">
              <input class="inp" type="checkbox" />
              <span class="s">保持登录状态</span>
            </div>
            <span class="fro">忘记密码？</span>
          </div>
        </div>
        <div class="last">
          <div class="llast">
            <span>没有账户？在这里</span>
            <span @click="goregister">注册</span>
          </div>
          <button @click="postData">登录</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    this.postData();
  },
  data() {
    return {
      uname: "",
      upwd: "",
    };
  },
  methods: {
    goregister() {
      const target = "/register";
      if (this.$route.path !== target) {
        this.$router.push(target);
      }
    },
    postData() {
      // const { uname, upwd } = this;
      // const url = "";
      // const params = `uname=${uname}&upwd=${upwd}`;
      // this.axios.post(url, params).then((res) => {
      //   console.log(res);
      //   if (res.data.code === 1) {
      //     alert("登陆成功即将跳转首页");
      //     this.$router.push("./");
      //   }
      // });
      this.axios.get('/user/select', `username=${this.uname}&userpwd=${this.upwd}`).then(res => {
        console.log(res)
      })
    },
  },
};
</script>

<style lang="scss" scoped>
.login {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;

  .xlogin {
    width: 700px;
    height: 617px;
    background-color: rgb(246, 203, 177);
    // margin: 0 auto;
    box-shadow: 10px 10px 10px 10px rgb(227, 199, 199);

    h1 {
      margin-top: 62px;
      color: black;
      font-size: 30px;
      font-weight: 600;
    }

    h4 {
      margin-top: 30px;
      font-size: 18px;
    }

    .input {
      margin: auto;
      margin-top: 43px;
      // background-color: red;
      width: 590px;
    }

    h3 {
      margin: 10px 0;
      font-size: 18px;
      font-weight: 500;
      text-align: left;
    }

    // input:focus {
    //   color: rgb(15, 15, 15);
    // }
    input:focus::placeholder {
      opacity: 0;
      transition: 0.2s;
    }

    input:not(.inp) {
      width: 550px;
      height: 50px;
      margin-right: 40px;
      // border-radius: 5px;
      border: none;
      border-bottom: 1px solid black;
      outline: none;
      padding: 0 25px;
      font-size: 18px;
    }

    .inp {
      width: 20px;
      height: 20px;
    }

    .status {
      display: flex;

      .inph {
        margin-top: 32px;
        height: 40px;
        display: flex;
        justify-content: space-between;
        width: 590px;

        .left {
          position: relative;
        }

        .s {
          position: absolute;
          top: 4px;
          width: 120px;
          font-size: 18px;
        }

        .fro {
          margin-top: 5px;
          color: red;
          font-size: 18px;
        }

        .fro:hover {
          font-size: 20px;
        }
      }
    }

    .last {
      display: flex;
      justify-content: space-between;
      margin-top: 90px;
      height: 100px;

      button {
        width: 118px;
        height: 60px;
        background-color: red;
        border: none;
        font-size: 18px;
        color: white;
        border-radius: 3px;
      }

      button:hover {
        font-size: 20px;
        color: antiquewhite;
        background-color: crimson;
        transform: 0.3;
      }

      .llast {
        font-size: 18px;
        margin-top: 30px;

        span:last-child {
          color: red;
        }

        span:last-child:hover {
          font-size: 20px;
        }
      }
    }
  }
}
</style>